<template>
  <div class="part">
    <Layer v-bind="layerPost1">
      <div class="part-top">
        <div class="part-top-cell">
          <Square v-bind="data1[0]" />
          <Square v-bind="data1[1]" />
        </div>
        <div class="part-top-cell">
          <Square v-bind="data1[2]" />
          <Square v-bind="data1[3]" />
        </div>
        <div class="part-top-cell">
          <Square v-bind="data1[4]" />
          <Square v-bind="data1[5]" />
        </div>
      </div>
    </Layer>
    <Layer v-bind="layerPost2">
      <div class="part-middle">
        <SquareProcess :source="data2[0]" />
        <SquareProcess :source="data2[1]" />
        <SquareProcess :source="data2[2]" />
        <SquareProcess :source="data2[0]" />
        <SquareProcess :source="data2[1]" />
        <SquareProcess :source="data2[2]" />
        <SquareProcess :source="data2[0]" />
      </div>
    </Layer>
    <Layer v-bind="layerPost3">
      <div id="chart-part1-b1"></div>
    </Layer>
  </div>
</template>

<script>
import Layer from './LayerItem.vue'
import Square from './SquareItem.vue'
import SquareProcess from './SquareProcess.vue'
import * as echarts from 'echarts'
export default {
  name: 'ViewPart1',
  components: { Layer, Square, SquareProcess },
  data() {
    return {
      data1: [
        {
          title: '节点',
          value: 1111,
          unit: "个"
        },
        {
          title: '算力',
          value: 2222,
          unit: "核*时"
        },
        {
          title: '存储',
          value: 3333,
          unit: "G"
        },
        {
          title: '负载',
          value: 2,
          unit: ""
        },
        {
          title: '集群五',
          value: 5555,
          unit: "个"
        },
        {
          title: '集群六',
          value: 6666,
          unit: "个"
        },
      ],
      data2: [
        {
          name: '集群一',
          usedPercent: 50,
          used: 500,
          total: 1000,
        },
        {
          name: '集群二',
          usedPercent: 12,
          used: 200,
          total: 2400,
        },
        {
          name: '集群三',
          usedPercent: 28,
          used: 560,
          total: 2000,
        },
      ],
      data3: [
        {
          key: '周一',
          value: 220,
        },
        {
          key: '周二',
          value: 820,
        },
        {
          key: '周三',
          value: 390,
        },
        {
          key: '周四',
          value: 790,
        },
        {
          key: '周五',
          value: 1120,
        },
        {
          key: '周六',
          value: 210,
        },
        {
          key: '周七',
          value: 320,
        },
      ],
    }
  },
  computed: {
    layerPost1() {
      return {
        title: '集群一览',
      }
    },
    layerPost2() {
      return {
        title: '集群概况',
      }
    },
    layerPost3() {
      return {
        title: '计算资源负载',
      }
    },
  },
  mounted() {
    this.drawPost3(this.data3)
  },
  methods: {
    getDataPost1() {},
    getDataPost2() {},
    getDataPost3() {},
    drawPost3(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart-part1-b1'))
      // 绘制图表
      myChart.setOption({
        textStyle: {
          fontSize: '30px',
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: '32px',
          },
          formatter: (params) => {
            const param = params[0]
            const { axisValueLabel, marker, value } = param
            let newMarker = marker.replace(
              /(.*border-radius:)(\d*)(px.*)/,
              '$124$3',
            )
            newMarker = newMarker.replace(
              /(.*width:)(\d*)(px.*)/,
              '$124$3',
            )
            newMarker = newMarker.replace(
              /(.*height:)(\d*)(px.*)/,
              '$124$3',
            )
            return `${newMarker} ${axisValueLabel}  ${value}`
          },
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#bbb',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: '32px',
          },
          data: data.map((i) => i.key),
        },
        yAxis: {
          type: 'value',
          name: '负载指数',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#bbb',
            },
          },
          axisLabel: {
            fontSize: '30px',
          },
          splitLine: {
            lineStyle: {
              color: '#2d3036',
            },
          },
        },
        grid: {
          left: '15%',
          right: '5%',
          top: '11%',
          bottom: '12%',
        },
        series: [
          {
            type: 'line',
            smooth: true,
            data,
            symbolSize: 0,
            lineStyle: {
              color: '#21f1f2',
            },
          },
        ],
      })
    },
  },
}
</script>

<style scoped>
.part {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.part-top {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.part-top-cell {
  display: flex;
  height: 100%;
  width: 100%;
}
.part-middle {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
</style>
